<template>
    <div class="bsdl">
        <div class="block left l">
            <el-carousel trigger="click" height="330px">
                <el-carousel-item v-for="(item,index) in imgArr" :key="index">
                    <h3><a href="###">{{ item.title }}</a></h3>
                    <img :src="item.url" alt="图片无法显示" :title="item.title"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="center l">
            <a href="###" v-for="(item,index) in imgArr2" :key="index">
                <img :src="item.url" alt="图片无法显示" :title="item.title">
            </a>
        </div>
        <div class="right l">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户中心" name="first">
                    <div v-if="!personRagister">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm junjixinxibiao" id="junjixinxibiao" accept-charset="UTF-8">
                            <el-form-item label="" prop="certificateNumber">
                                <el-input 
                                    v-model="ruleForm.certificateNumber"
                                    id="certificateNumber"
                                    placeholder="请输入身份证号"
                                    prop="certificateNumber"
                                >   
                                    <i slot="prefix" class="el-input__icon iconfont icon-rentou"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="" prop="personPassword">
                                <el-input 
                                    v-model="ruleForm.personPassword"
                                    id="personPassword"
                                    placeholder="请输入密码"
                                    type="password"
                                    prop="personPassword"
                                >   
                                    <i slot="prefix" class="el-input__icon iconfont icon-ai241"></i>
                                </el-input>
                            </el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
                        </el-form>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-button type="primary" class="r">
                                    <router-link :to="{name:'login_zc'}">忘记密码</router-link>
                                </el-button>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" class="r">
                                    <router-link :to="{name:'login_zc'}">立即注册</router-link>
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-if="personRagister" class="personRagister">
                        <p>您好，欢迎访问!</p>
                        <p>用户姓名：{{personRagister.personName}}</p>
                        <p>所属类别：{{personRagister.personType}}</p>
                        <p class="tc">
                            <span @click="exit()">退出登录</span>
                        </p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">
                    配置管理
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import interface_s from '@/api/api.js'
export default {
     data(){
        return {
            personRagister:this.$cookies.get('personRagister'),
            ruleForm:{
                certificateNumber:'', //请输入身份证
                personPassword:'',//请输入密码
                // userID:'',//身份标识
            },
            rules:{ 
                certificateNumber:[
                     { required: true, message: '请输请输入身份证', trigger: 'blur' }
                ],
                personPassword:[
                    { required: true, message: ' ', trigger: 'blur' }
                ]
            },
            activeName: 'first',
            imgArr:[
                {url:require('../../assets/images/bg1.jpg'),title:'退役军人事务部在北京正式挂牌成立',id:1},
                {url:require('../../assets/images/bg2.jpg'),title:'全国退役军人事务厅（局）长会议在京召开',id:2},
                {url:require('../../assets/images/bg3.jpg'),title:'孙绍骋同志到河北省调研退役军人党建和思想政治工作',id:3}
            ],
            imgArr2:[
                {url:require('../../assets/images/pic1.jpg'),title:'烈士英名录',id:1},
                {url:require('../../assets/images/pic2.png'),title:'本色永不改',id:2},
                {url:require('../../assets/images/pic3.png'),title:'双拥模范城',id:3}
            ]
        }
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    let postData = this.$qs.stringify(this.ruleForm);
                    console.log(postData)
                    // 登录请求
                    this.$axios.post(this.HOST+interface_s.login,postData,{
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded', 
                        }
                    })
                    .then( (response) => {
                        console.log(response);
                        console.log(response.data.bo)
                        console.log(response.data.message)
                        if(response.data.bo && response.data.message=="登录成功"){
                            console.log(response.data.personRagister.personType)
                            this.ruleForm.userID = response.data.userID
                            this.$cookies.set('userID',response.data.userID, 1140*60)
                            this.$cookies.set('personRagister',response.data.personRagister, 1140*60)
                            localStorage.setItem('personRagister', JSON.stringify(response.data.personRagister));
                            this.$notify({
                                title: '成功',
                                message: '消息提示：您已经登录成功',
                                type: 'success'
                            });
                            this.personRagister = response.data.personRagister

                            //登录成功，查询用户信息。
                            this.echo(interface_s.querys,response.data.userID);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        exit(){
            this.$confirm('您确定要退出登录嘛?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$cookies.remove('userID') 
                this.$cookies.remove('personRagister') 
                this.personRagister = ''
            })
            
        }
    },
    created(){
        // console.log(this.$qs)
        // console.log(this.$cookies.get('personRagister'))
    }
}
</script>

<style scoped>
.bsdl{
    overflow: hidden;
}
.bsdl .left{
    width: 530px;
    height: 330px;
}
.el-carousel__item h3 {
    color: #FFF;
    font-size: 14px;
    line-height: 45px;
    margin: 0;
    position:absolute;
    background:rgba(0, 0, 0, 0.6);
    width:100%;
    bottom:0px;
    padding-left:20px;
}
.el-carousel__item h3 a{
    color:#FFF;
}
.el-carousel__item{
    
}

.center{
    width:350px;
    margin-left:20px;
    overflow: hidden;
}
.center a{
    display:block;
    height:100px;
    margin-bottom:15px;
}

.right{
    background: #FFF;
    width: 238px;
    height: 310px;
    margin-left:20px;
    padding:10px 20px;
}
.right .el-input__prefix{
    left:7px;
}
.right .iconfont{
    font-size:20px;
}
.right .el-input--prefix{
    margin-bottom:15px;
}
.right .el-button{
    padding:0px;
    height: 35px;
    line-height: 35px;
    width: 100%;
    margin-bottom:15px;
}
.right .el-form-item{
    margin-bottom:0px;
}
.personRagister{
    position: relative;
    height: 272px;
}
.personRagister p{
    line-height:30px;
}
.personRagister .tc{
    position: absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:30px;
}
.personRagister .tc span{
    cursor: pointer;
}
</style>